<script setup>
import { goAnchor } from "@/hook/universality"
import { useContent } from '@/stores/content'

const Content = useContent()
</script>

<template>
  <div class="model content" v-if="Content.items.length">
    <div class="tittle">目录</div>
    <div class="lanitems">
      <div v-for="(v, i) in Content.items" :key="v" @click.stop="goAnchor(Content.anchors[i])" class="hoverBottom">
        <span v-if="Content.types[i] == 0" style="font-weight: bold;">{{ v }}</span>
        <span v-else-if="Content.types[i] == 1">{{ v }}</span>
        <span v-else>&nbsp;{{ v }}</span>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
/* 目录 *****************************************/
.content {


  .lanitems {
    max-height: 500px;
    overflow: auto;

    >div {
      /* 超出省略号（单行） */
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}


/* 栏目标题 */
.tittle {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 15px;
}
</style>